<template>
<div>
  <el-card style="height:99%">
    <el-row>
      <el-col>
        <el-input placeholder="搜索..." style="width:400px" v-model="searchetyma" v-focus>
          <el-button  slot="append" icon="el-icon-search" @click="searchetymaByletters(searchetyma)"></el-button>
        </el-input>
        <el-button plain type="success" @click="showAddDialog()">+NewEtyma</el-button>
      </el-col>
    </el-row>

    <el-table :data="etymaTableData" style="width: 100%" stripe="true" height=650 @row-click="handleClick">
      <el-table-column type="index" width="80"></el-table-column>
      <el-table-column prop="etyma" label="词根" width="180" sortable></el-table-column>
      <el-table-column prop="explanation" label="解释" width="180"></el-table-column>
      <el-table-column
       label="等级" prop="lv" width="150" sortable>
      <template slot-scope="scope">
        <el-rate v-model="scope.row.lv" style="display:inline-block" disabled></el-rate>
      </template>
      </el-table-column>
      <el-table-column prop="eg[0]" label="Example"></el-table-column>
      <el-table-column
       label="操作">
      <template slot-scope="scope">
        <el-button @click="showEditPanel(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button @click="confirmDeleteWord(scope.row)" type="danger"  icon="el-icon-delete" circle></el-button>
      </template>
      </el-table-column>
      <el-table-column prop="recordtime" label="记录日期" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.recordtime|yymmdd}}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[8]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="etymatable.count">
    </el-pagination>
  </el-card>

  
  
  <el-dialog
  title="添加新词根"
  :visible.sync="dialogAddVisible"
  width="65%"
  @close="closeEditPanel">
     <etymaedit  paneltype="add" v-on:etymaeditCancel="closeEditPanel" v-on:submitFromSub="addnewetyma"></etymaedit>
</el-dialog>

  <el-dialog
  title="编辑单词"
  :visible.sync="dialogEditVisible"
  width="65%"
  @close="closeEditPanel">
     <etymaedit ref="etymaedit" paneltype="200" v-on:etymaeditCancel="closeEditPanel" v-on:editcreate="setEditData" v-on:updateFromSub="updateetyma"></etymaedit>
</el-dialog>

</div>
</template>

<script>
import { get,post } from "../../request";
import { mapActions } from 'vuex';
export default {
  data() {
    return {
      name:'etymasinfo',
      etymatable:{etymas:[],count:0},
      searchetyma:'',
      dialogAddVisible:false,
      dialogEditVisible:false,
      tempEditData:null,
      
    };
  },
  filters:{
    uppercase:function(etyma){
      return etyma.toUpperCase();
    },
    yymmdd:function(datest){
      return datest.split('T')[0];
    }
  },
  computed:{
    etymaTableData(){
      return(this.etymatable.etymas);
    }
  },
  mounted(){
  },
  methods: {
    confirmDeleteWord(info){
      this.$confirm('此操作将永久删除该单词, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(info);
          this.deleteetyma(info._id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    setEditData(){
      console.log('set edit data');
      this.$refs.etymaedit.setData(this.tempEditData);
    },
    showEditPanel(data){
      this.dialogEditVisible = true;
      this.tempEditData = data;
      console.log(data);
      this.setForm(data);
    },
    showMessage(msg,typecolor){
      if(typecolor=='error'){
        this.$message.error(msg);
      }else{
        this.$message({type:typecolor,message:msg});
      }
    },
    showDeleteMsg(isSuccess,msg){
       if(isSuccess){
          this.$message({
            type: 'success',
            message: '删除成功'
          });          
       }else{
          this.$message({
            type: 'info',
            message:msg 
          });          
       }
    },
    setWordpanel(data){
      console.log(data);
    },
    handleEdit(a,b,c){
      console.log(a);
    },
    closeWordpanel(){
      this.dialogVisible = false;
    },
    handleClose(){
      this.dialogVisible = false;
    },
    showAddDialog(){
      this.dialogAddVisible=true;
      console.log("add new etyma");
    },

    handleSizeChange(a){
      this.resetTable();
    },
    handleCurrentChange(a){
      this.resetTable();
    },
    resetTable(){
      if(this.$refs.pagination){
        let {internalPageSize:limit,internalCurrentPage:current} = this.$refs.pagination;
        this.getetymas((current-1)*limit,limit);
      }else{
        this.getetymas(0,8);
      }
    },
    updateetyma(data){
      let url = "/api/updateetyma";
      post(
        url,
        data,
        (res, err) => {
          if (err) {
            console.log(err);
          } else {
            this.resetTable();
            this.dialogEditVisible = false;
            console.log(res);
            if (res.data.statuscode== 208) {
              console.log('成功更新')
              this.$message({type:'success',message:res.data.message});
            } else {
              console.log('更新失败')
              this.$message({type:'warning',message:res.data.message});
            }
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    addnewetyma(data){
      let url = "/api/addnewetyma";
      post(
        url,
        data,
        (res, err) => {
          if (err) {
            console.log("-----------error------------");
            console.log(err);
          } else {
            console.log(res);
            this.dialogAddVisible = false;
            if(res.status == 200){
              if(res.data.codestatus==280){
                this.resetTable();
                this.showMessage(res.data.message,'success');
              }else{
                console.log(res.data.message);
                this.showMessage(res.data.message,'error');
              }
            }
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    deleteetyma(etymaid) {
      get(
        "/api/deleteetyma/" + etymaid,
        (res, err) => {
          if(err)
             console.log(err);
          console.log(res);
          let id = res.data.deleteetymaid;
          this.resetTable();
          this.showDeleteMsg(true);
        },
        err => {
          console.log(err);
        }
      );
    },
    getetymas(skip, limit) {
      get(
        "/api/getetymas/" + skip + "/" + limit,
        (res, err) => {
          console.log(res);
          this.etymatable = res.data;
          console.log(this.etymatable);
        },
        err => {
          console.log(err)
        }
      );
    },
    
    searchetymaByletters(etyma){
      get("api/searchetymas/"+etyma,(res,err)=>{
        if(err){
          console.log(err);
        }else{
          this.etymatable = res.data;
        }
      },(err)=>{console.log(err);});  
    },
    closeEditPanel(){
      console.log('edit close');
      this.dialogEditVisible = false;
      this.dialogAddVisible = false;
      this.resetTable();
      this.resetForm();
    },
    ...mapActions("etyma",{
       setForm:'setForm',
       resetForm:'resetForm'
    })
  },
  created() {
    console.log("created");
    this.resetTable();
  },
  watch:{
    etymatable(val){
      console.log('watch');
    }
  }
};
</script>